<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <div class="container">
        <div class="left">
          <a-menu
            mode="inline"
            :style="{ border: '0'}"
            :selectedKeys="selectedKeys"
            @select="onSelect"
          >
            <a-menu-item key="basic">
              基础设置
            </a-menu-item>
            <a-menu-item key="reset">
              修改密码
            </a-menu-item>
          </a-menu>
        </div>
        <div class="right">
          <Basic v-if="selectedKeys[0] ==='basic'"/>
          <Reset v-if="selectedKeys[0] ==='reset'"/>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
  import style from './index.css'
  import Basic from '@/views/system/account/Basic'
  import Reset from '@/views/system/account/Reset'

  export default {
    components: {
      Basic,
      Reset
    },
    data() {
      return {
        selectedKeys: ['basic']
      }
    },
    methods: {
      onSelect(selectedKeys) {
        this.selectedKeys = [selectedKeys.key]
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
